<template>
  <el-row>
    <!--订单信息-->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>订单信息</span>
        <el-button class="pull-right" type="primary" @click="showLabelPrintModal">打印标签</el-button>
      </div>
      <el-form label-position="left" label-width="120px">
        <el-row>
          <el-col :lg="6" :md="12" >
            <el-form-item label="关联订单：">
              <span>{{chOrderService.orderNo}}</span>
            </el-form-item>
          </el-col>
          <el-col  :lg="6" :md="12" >
            <el-form-item label="商家名称：">
              <span>{{chOrderService.cargoOwnerName}}</span>
            </el-form-item>
          </el-col>
          <el-col :lg="6" :md="12" >
            <el-form-item label="入库仓：">
              <span>{{chOrderService.warehouse}}</span>
            </el-form-item>
          </el-col>
          <el-col  :lg="6" :md="12">
            <el-form-item label="关联订单类型：">
              <span>{{chOrderService.orderType | filterDataBaseDictionary}}</span>
            </el-form-item>
          </el-col>
          <el-col :lg="6" :md="12">
            <el-form-item label="仓储类型：">
              <span>{{chOrderService.storageTypeCode | filterDataBaseDictionary}}</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!--打印组件-->
      <Label-modal ref="LabelModal" :printData="printData" @refresh="getDetail"></Label-modal>
      <!--<PrintModal ref="PrintModal" :sortingId="id"></PrintModal>-->
    </el-card>
    <!--客户信息：服务订单有-->
    <el-col :span="24">
      <UserInfo :chOrderConsigneeInfo="chOrderService" v-if="chOrderService.orderType === 'STORAGEORDERTYPE01'"></UserInfo>
    </el-col>
    <!--商品信息-->
    <el-col :span="24">
      <Portlet title="商品信息"  style="position:relative;">
        <el-form :model="model" :rules="rules" label-position="left" ref="elForm" label-width="100px">
          <el-form-item label-width="0" prop="packageArr" :rules="[
                  {required: true, message: '商品信息必须', trigger: 'change', type: 'array'}
               ]">
            <el-table
              :data="packageArr"
              style="width:100%"
              border
              class="text-center"
            >
              <el-table-column
                align="center"
                min-width="150px"
                prop="manufacturersName"
                label="厂家名称"
              >
              </el-table-column>
              <el-table-column
                align="center"
                min-width="120px"
                prop="productNo"
                label="商品编号">
              </el-table-column>
              <el-table-column
                align="center"
                min-width="120px"
                prop="productName"
                label="商品名称">
              </el-table-column>
              <el-table-column
                align="center"
                min-width="120px"
                prop="bigClass"
                label="商品大类">
              </el-table-column>
              <el-table-column
                align="center"
                min-width="120px"
                prop="middleClass"
                label="商品小类">
              </el-table-column>
              <el-table-column
                align="center"
                min-width="120px"
                prop="productNum"
                label="商品数量">
              </el-table-column>
              <el-table-column
                v-if="productType == 1"
                align="center"
                min-width="80px"
                prop="standard"
                label="规格">
              </el-table-column>
              <el-table-column
                v-if="productType == 1"
                align="center"
                min-width="120px"
                prop="packageNo"
                label="包件编号">
              </el-table-column>
              <el-table-column
                v-if="productType == 1"
                min-width="150px"
                prop="packageName"
                align="center"
                label="包件名称">
              </el-table-column>
              <el-table-column
                align="center"
                min-width="100px"
                prop="packageNum"
                label="包件数量">
              </el-table-column>
              <el-table-column
                v-if="productType == 1"
                align="center"
                min-width="100px"
                prop="packageOneVolume"
                label="单包件体积">
                <!--<template slot-scope="scope">-->
                <!--{{ scope.row.volume | decimalNumFilter}}-->
                <!--</template>-->
              </el-table-column>
              <el-table-column
                v-if="productType == 1"
                align="center"
                min-width="100px"
                prop="packageOneWeight"
                label="单包件重量">
              </el-table-column>
              <el-table-column
                v-if="productType == 1"
                align="center"
                min-width="115px"
                prop="packageUnit"
                label="包件单位">
              </el-table-column>
            </el-table>
          </el-form-item>
        </el-form>
        <div style="position:absolute;left:140px;top:17px;font-size:14px;color:red">商品类型： {{getProductName(productType)}}</div>

        <!--总的包件体积重量-->
        <el-row style="margin-top:15px;font-size:14px">
          <el-col :span="6">
            总包件：<span> {{chOrderService.totalPackage}} 件</span>
          </el-col>
          <el-col :span="6">
            总体积：<span> {{chOrderService.totalVolume}} m³</span>
          </el-col>
          <el-col :span="6">
            总重量：<span> {{chOrderService.totalWeight}} kg</span>
          </el-col>
        </el-row>
      </Portlet>
    </el-col>
  </el-row>
</template>

<script>
import {dotData} from '@/utils'
import SelectPosition from '@/views/oms/business/SelectPositionByEnter'
import OrderInfo from '@/views/oms/enterWarehouse/warehousingOrder/OrderInfo'
import UserInfo from '@/views/oms/enterWarehouse/warehousingOrder/UserInfo'
import CustomerInfo from '@/views/oms/enterWarehouse/warehouseConfirm/CustomerInfo'
import {decimalNumFilter, unixTimestampFilter} from '@/filters'
import DBLike from '@/utils/DBLike'
import LabelModal from '@/views/oms/print/label/LabelModal'
export default {
  name: 'printLabelShow',
  components: {
    LabelModal,
    UserInfo,
    CustomerInfo,
    OrderInfo,
    DBLike,
    SelectPosition
  },
  filters: {
    decimalNumFilter,
    unixTimestampFilter
  },
  data() {
    return {
      printData: [],
      id: this.$route.params.id,
      // state: this.$route.query.state,
      orderType: this.$route.query.orderType,
      routeName: this.$route.name,
      headerDetail: {},
      chOrderService: {}, // 订单信息
      chOrderConsigneeInfo: {}, // 客户信息
      productDetailBeans: [], // 产品信息
      packageArr: [], // 包件信息
      loading: false,
      model: { // 把整个表格 都看作是要提交的东东model
        chSortingPackageBeans: [
        ]
      },
      params: {
        pageSize: 20,
        pageNum: 1
      },
      // warehouseIdArr: [],
      rules: {}
      // cargoOwnerArr: [], // 模拟 库位下拉选项
      // totalItem: 0
    }
  },
  created() {
    this.getDetail()
  },
  computed: {
    // 标准产品1，通用产品2==自定义产品3
    productType() {
      return dotData(this.chOrderService, 'productType') || 1 // 默认为标准产品
    }
  },
  methods: {
    unixTimestampFilter,
    getDetail() {
      this.$ajax.get('/ms-terminal-order/labelPrint/findPrintInfoBean', {orderId: this.id}).then(response => {
        if (response.success) {
          // this.totalItem = response.total
          this.chOrderService = response.data || {} // 订单信息 + 客户信息
          this.packageArr = response.data.labelPrintPackageBeanList || [] // 商品包件信息
          console.log('0000', this.chOrderService)
          console.log('2222', this.packageArr)
        }
      })
    },
    // 过滤 商品类型 最终：productType通过计算而来：标准产品1，通用产品2==自定义产品3
    getProductName(type) {
      if (type === 1) {
        return '标准产品'
      } else if (type === 2) {
        return '通用产品'
      } else if (type === 3) {
        return '自定义产品'
      }
      return ''
    },
    // 传入数据，弹出打印modal
    showLabelPrintModal() {
      this.printData = [this.chOrderService]
      this.$refs.LabelModal.show()
    }
  }
}
</script>
